<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5></h5>

                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="content">
                    <div class="table-responsive">
                        <div>
                            <a href class="btn btn-primary dim">
                            <i class="fa fa-fw fa-lg fa-plus"></i> <span></span></a>
                        </div>
                        <table class="table-striped table-hover" data-mobile-responsive="true"></table>
                    </div>
                </div>
                <div class="ibox-content">

                    <table></table>

                </div>
            </div>
        </div>
    </div>
</div>

&lt;script&gt;
    /*bootstrap table*/
    $('#table').bootstrapTable({
        toolbar: "#toolbar",
        method: 'post', // 服务器数据的请求方式 get or post
        url: window.location, // 服务器数据的加载地址
        queryParams: function (params) {
            return {
                "offset": params.offset,
                "limit": params.limit,
                "search": params.search
            }
        },
        search: true,
        contentType: "application/x-www-form-urlencoded",
        striped: true, // 设置为true会有隔行变色效果
        showHeader: true,
        showColumns: true,
        showRefresh: true,
        pagination: true,//分页
        sidePagination: 'server',//服务器端分页
        pageNumber: 1,
        pageList: [5, 10, 20, 50],//分页步进值
        detailView: true,
        smartDisplay: true, // 智能显示 pagination 和 cardview 等
        onExpandRow: function () {$('body').setLang ('.detail-view');},
        onPostBody: function (data) { if ($(this)[0].locale != undefined ) $('body').setLang ('#table'); },
        detailFormatter: function (index, row, element) {
            return '<b></b>: ' + changeunit(row.Flow.ExportFlow) + '&emsp;'
                    + '<b></b>: ' + changeunit(row.Flow.InletFlow) + '&emsp;'
                    + '<b></b>: ' + row.Client.Cnf.Crypt + '&emsp;'
                    + '<b></b>: ' + row.Client.Cnf.Compress + '&emsp;'
                    + '<b></b>: ' + row.Client.Cnf.U + '&emsp;'
                    + '<b></b>: ' + row.Client.Cnf.P + '&emsp;<br /><br>'
                    + '<b></b>: ' + row.CertFilePath + '&emsp;'
                    + '<b></b>: ' + row.KeyFilePath + '&emsp;<br /><br>'
                    + '<b></b>: ' + row.HeaderChange + '&emsp;<br /><br>'
                    + '<b></b>: ' + row.HostChange + '&emsp;'
        },
        //表格的列
        columns: [
            {
                field: 'Id',//域值
                title: '<span></span>',//标题
                halign: 'center',
                visible: true//false表示不显示
            },
            {
                field: 'Id',//域值
                title: '<span></span>',//标题
                halign: 'center',
                visible: true,//false表示不显示
                formatter: function (value, row, index) {
                    return row.Client.Id
                }
            },
            {
                field: 'Remark',//域值
                title: '<span></span>',//标题
                halign: 'center',
                visible: true//false表示不显示
            },
            {
                field: 'Host',//域值
                title: '<span></span>',//标题
                halign: 'center',
                visible: true//false表示不显示
            },
            {
                field: 'Scheme',//域值
                title: '<span></span>',//标题
                halign: 'center',
                visible: true,//false表示不显示
                formatter: function (value, row, index) {
                    return '<span></span>'
                }
            },
            {
                field: 'Target',//域值
                title: '<span></span>',//标题
                halign: 'center',
                visible: true,//false表示不显示
                formatter: function (value, row, index) {
                    return row.Target.TargetStr
                }
            },
            {
                field: 'Location',//域值
                title: '<span></span>',//标题
                halign: 'center',
                visible: true//false表示不显示
            },
            {
                field: '',//域值
                title: '<span></span>',//内容
                align: 'center',
                halign: 'center',
                visible: true,//false表示不显示
                formatter: function (value, row, index) {
                    hosturl = ((row.Scheme == 'http' ) ? 'http://' : 'https://') + row.Host + row.Location
                    if (row.Client.IsConnect) {
                        return '<a href target="_blank"><span class="badge badge-primary"></span></a>'
                    } else {
                        return '<span class="badge badge-badge"></span>'
                    }
                }
            },
            {
                field: 'option',//域值
                title: '<span></span>',//内容
                align: 'center',
                halign: 'center',
                visible: true,//false表示不显示
                formatter: function (value, row, index) {
                    btn_group = '<div class="btn-group">'
                    btn_group += "&lt;a onclick=\"submitform('delete', '{{.web_base_url}}/index/delhost', {'id':" + row.Id
                    btn_group += '})" class="btn btn-outline btn-danger"&gt;&lt;i class="fa fa-trash"&gt;&lt;/i&gt;&lt;/a&gt;'
                    btn_group += '&lt;a href="{{.web_base_url}}/index/edithost?id=' + row.Id
                    btn_group += '" class="btn btn-outline btn-success"&gt;&lt;i class="fa fa-edit"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;'
                    return btn_group
                }
            }
        ]
    });
&lt;/script&gt;
